<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- v-model:用于实现表单元素和数据的双向绑定 -->
    <!-- 原生js上传数据：用户在表单中输入数据，单击提交，获取输入的数据，上传数据库 -->
    <!-- vue使用v-model绑定数据：用户输入数据，data中的数据实时更新；data中的数据改变，表单中的数据实时更新 -->

    <div id="app">
        <!-- 一、v-model实现数据双向绑定的原理 -->
        <div>
            <input type="text" @input="inputVal" :value="message">
            <h1>输入的内容：{{message}}</h1>
            <!-- 1.实现input框中（表单元素）的值改变，meassage的值（data数据）跟着改变 -->
            <!-- 2.实现message的值（data数据）改变，input框中（表单元素）的值跟着改变 -->
        </div>

        <!-- 二、v-model绑定input -->
        <div>
            <input type="text" v-model="inputdata">
            <h1>{{inputdata}}</h1>
        </div>

        <!-- v-model的使用场景： -->
        <!-- v-model指令可以在表单的input、textarea、select元素上创建双向绑定，
            它会根据控件类型自动选择正确的方法来更新元素

            表单提交时开发中的常见功能，也是和用户交互的重要手段：
            比如用户登录、注册的时候提交的账号信息，比如用户在搜索、创建、更新信息时，
            需要提交数据，这些都需要先获取到用户提交的数据，因此可以使用v-model来完成
        -->

        <!-- 三、v-model绑定textarea -->
        <div>
            <textarea name="" id="" cols="30" rows="10" v-model="textareadata"></textarea>
            <h1>输入的内容：{{textareadata}}</h1>
        </div>

        <!-- 四、v-model绑定单选框 -->
        <div>
            <input type="radio" id="man" name="sex" value="男" v-model="sex"> <label for="man">男</label>
            <input type="radio" id="women" name="sex" value="女" v-model="sex"> <label for="women">女</label>
            <h1>选择的结果是：{{sex}}</h1>
        </div>


        <!-- 五、v-model绑定多框 -->
        <!-- 1.单个多选框:v-model绑定的数据结果一般都是布尔值，此时的input中的value取值取值不影响v-model的值 -->
        <div>
            <input type="checkbox" name="" id="agree" v-model="agree"><label for="agree">同意协议</label>
            <h1>选择的结果是：{{agree}}</h1>
        </div>

        <!-- 2.多个多选框（值固定）：因为多选结果可能是很多个，因此会把数据存放在数组中，所以data中属性值是一个数组 -->
        <div>
            <input type="checkbox" name="" id="one" value="苹果" v-model="fruits"><label for="one">苹果</label>
            <input type="checkbox" name="" id="two" value="橘子" v-model="fruits"><label for="two">橘子</label>
            <input type="checkbox" name="" id="theee" value="香蕉" v-model="fruits"><label for="theee">香蕉</label>
            <input type="checkbox" name="" id="foue" value="葡萄" v-model="fruits"><label for="foue">葡萄</label>
            
        </div>

        <!-- 3. 多个多选框（值来源于网络）-->
        <div>
            <label v-for="(item,index) in fruitsArr" :for="index">
                <input type="checkbox" name="fruits" :id="index" :value="item" v-model="fruitsArr2">
                {{item}}
            </label>
            <h1>选择的结果是：{{fruitsArr2}}</h1>
        </div>

        <!-- 六、v-model绑定selet下拉列表 -->
        <!-- 1.单选：只能选择一个值 -->
        <div>
            <select name="" id="" v-model="select">
                <option value="苹果">苹果</option>
                <option value="橘子">橘子</option>
                <option value="香蕉">香蕉</option>
                <option value="葡萄">葡萄</option>
            </select>
            <h1>选择的结果是：{{select}}</h1>
        </div>
        <!-- 2.多选：可以选择多个值，值存放在数组中，所以data中属性值是一个数组  -->
        <div>
            <select name="" id="" v-model="selectArr" multiple size="4">
                <option value="苹果">苹果</option>
                <option value="橘子">橘子</option>
                <option value="香蕉">香蕉</option>
                <option value="葡萄">葡萄</option>
            </select>
            <h1>选择的结果是：{{selectArr}}</h1>
        </div>

        <!-- 七、v-model的修饰符 -->
        <!-- 1.v-model.lazy -->
        <!-- 默认情况下，v-model在进行双向绑定的时候，绑定input事件，这就导致每次输入内容之后，马上内容就会实时更新
             但是有时候是不需要实时更新的，需要用户在输完所有内容之后，才进行后续操作
            因此就加上lazy修饰符，在用户输完内容之后，点击回车或者失去焦点之后，才获取用户输入的内容 -->
        <div>
            <input type="text" v-model.lazy="inputdata">
            <h1>{{inputdata}}</h1>
        </div>

        <!-- 2.v-model.number -->
        <!-- v-model绑定后值默认是string类型，即使在data中设置为number类型，传过去之后也会默认变回string类型
        因此，想要转为number类型，就使用number修饰符 -->
        <div>
            <input type="text" v-model.number="num">
            <h1>数字是：{{num}}</h1>
        </div>

        <!-- 3.v-model.trim -->
        <!-- 去除字符串的前后空格 -->
        <!-- 注意：如果内容是number类型，数字中间有空格，会把空格后面的内容全部自动删除 -->
        <div>
            <input type="text" v-model.trim="num">
            <h1>数字是：{{num}}</h1>
        </div>

        

       

    </div>
    <script src="./vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                message: "",
                inputdata: "",
                textareadata: "",
                sex: "",
                agree: false,
                fruits: [],
                fruitsArr: ["西瓜", "黄瓜", "南瓜", "冬瓜"],
                fruitsArr2:[],
                select:undefined,
                selectArr:[],
                num:6
            },
            methods: {
                inputVal() {
                    let value = event.target.value;
                    this.message = value;
                }
            },
            watch:{
                num(newV,oldVal){
                    console.log(typeof newV,newV);
                    console.log(typeof oldVal,oldVal);
                }
            }
        })
    </script>
</body>

</html>